.var-primary(@primary: #afb42b; @primary-weak: #c0ca33) {
    --primary        : @primary;
    --primary-70     : fade(@primary, 70%);
    --primary-50     : fade(@primary, 50%);
    --primary-30     : fade(@primary, 30%);
    --primary-weak   : @primary-weak;
    --primary-weak-50: fade(@primary-weak, 50%);
}

.var-theme(@body-color: #7B7B7D; @body-bg-color: #00151f; @theme-color: #00283a; @theme-bg-color: #fcfcfe; @theme-bg2-color: #f4f5f7) {
    --body-color       : @body-color;
    --body-color-5     : fade(@body-color, 5%);
    --body-bg-color    : @body-bg-color;
    --theme-color      : @theme-color;
    --theme-bg-color   : @theme-bg-color;
    --theme-bg-color-80: fade(@theme-bg-color, 80%);
    --theme-bg2-color  : @theme-bg2-color;
}

:root {
    @body-color     : #7B7B7D;
    @theme-bg-color : #fcfcfe;

    // base
    .var-primary();
    .var-theme();

    --box-shadow   : 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --box-shadow2  : inset 0 0 4px -1px rgba(0, 0, 0, 0.15);
    --border-dotted: dotted 2px rgba(225, 225, 235, 0.9);

    // preloader
    --preloader-background: #00283A;

    // top-bar
    --top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);

    // card
    --card-padding      : 40px;
    --card-bottom-card  : 40px;
    --card-border-radius: 10px;

    // cover
    --card-cover-bg-color: #e9e9e9;
}

.dark() {
    // base
    .var-primary();
    .var-theme(#cccdcfb3, #00151f, #dedee0, #00283a, #02162b);

    --box-shadow   : 0 2px 4px -2px rgba(0, 0, 0, 0.6);
    --box-shadow2  : inset 0 0 4px -1px rgba(0, 0, 0, 0.6);
    --border-dotted: dotted 2px rgba(225, 225, 235, 0.15);

    // preloader
    --preloader-background: #dedee0;

    // top-bar
    --top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6);

    // cover
    --card-cover-bg-color: #162e38;
}

:root.dark {
    .dark()
}

/* @media (prefers-color-scheme: dark) {
    :root {
        .dark()
    }
} */

@media(max-width:768px) {
    :root {
        --card-padding      : 20px;
        --card-bottom-card  : 20px;
        --card-border-radius: 6px;

        blockquote:before {
            top: 0;
        }
    }
}